<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>

<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								<label>TS代码：</label>
								<input type="text" name="tsCode" value="" />
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="main()"><i
										class="fa fa-search"></i>&nbsp;查询</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
										class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="col-sm-12 select-table table-striped" id="container" style="height: 100%"></div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: echarts-js" />
	<script type="text/javascript">
		//判断数据是否为Null或者undefined或者为空字符串
		function CheckIsNullOrEmpty(value) {
			//正则表达式用于判斷字符串是否全部由空格或换行符组成
			var reg = /^\s*$/
			//返回值为true表示不是空字符串
			return (value != null && value != undefined && !reg.test(value))
		}

		//获取后台交易数据
		function queryStockHistory() {
			var queryData;
			var tsCode = $("#formId input[name=tsCode]").val();
			if(CheckIsNullOrEmpty()){
				return null;
			}
			$.ajax({
				type: 'post',
				url: '/stock/stockreport/klist',
				data: {
					'tsCode': tsCode
				},
				async: false,
				success: function (msg) {
					//组装每天的各种价格的二维数组
					function get_price_array(data) {
						var len = data.length;
						var arr = [];
						for (var i = 0; i < len; i++) {
							// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
							// ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
							arr[i] = new Array();
							arr[i]['0'] = data[i].tradeDate;
							arr[i]['1'] = data[i].openPrice;
							arr[i]['2'] = data[i].closePrice;
							arr[i]['3'] = data[i].lowPrice;
							arr[i]['4'] = data[i].highPrice;
						}
						return arr;
					}
					queryData = get_price_array(msg.rows);
				}
			});

			return queryData;
		}

		//生成Echart图表
		function generateEchartImage(sourceData) {
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			var upColor = '#ec0000';
			var upBorderColor = '#8A0000';
			var downColor = '#00da3c';
			var downBorderColor = '#008F28';

			if(sourceData==null){				
				sourceData = [0][0];
			}
			var data0;
			try {
				data0 = splitData(sourceData);
			} catch (error) {
				alert(error);
			}

			function splitData(rawData) {
				var categoryData = [];
				var values = []
				for (var i = 0; i < rawData.length; i++) {
					categoryData.push(rawData[i].splice(0, 1)[0]);
					values.push(rawData[i])
				}
				return {
					categoryData: categoryData,
					values: values
				};
			}

			function calculateMA(dayCount) {
				var result = [];
				for (var i = 0, len = data0.values.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data0.values[i - j][1];
					}
					result.push(sum / dayCount);
				}
				return result;
			}

			option = {
				title: {
					text: '上证指数',
					left: 0
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				legend: {
					data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
				},
				grid: {
					left: '10%',
					right: '10%',
					bottom: '15%'
				},
				xAxis: {
					type: 'category',
					data: data0.categoryData,
					scale: true,
					boundaryGap: false,
					axisLine: { onZero: false },
					splitLine: { show: false },
					splitNumber: 20,
					min: 'dataMin',
					max: 'dataMax'
				},
				yAxis: {
					scale: true,
					splitArea: {
						show: true
					}
				},
				dataZoom: [
					{
						type: 'inside',
						start: 50,
						end: 100
					},
					{
						show: true,
						type: 'slider',
						top: '90%',
						start: 50,
						end: 100
					}
				],
				series: [
					{
						name: '日K',
						type: 'candlestick',
						data: data0.values,
						itemStyle: {
							color: upColor,
							color0: downColor,
							borderColor: upBorderColor,
							borderColor0: downBorderColor
						},
						markPoint: {
							label: {
								normal: {
									formatter: function (param) {
										return param != null ? Math.round(param.value) : '';
									}
								}
							},
							data: [
								{
									name: 'XX标点',
									coord: ['20200723', 5.05],
									value: 5.05,
									itemStyle: {
										color: 'rgb(41,60,85)'
									}
								},
								{
									name: 'highest value',
									type: 'max',
									valueDim: 'highest'
								},
								{
									name: 'lowest value',
									type: 'min',
									valueDim: 'lowest'
								},
								{
									name: 'average value on close',
									type: 'average',
									valueDim: 'close'
								}
							],
							tooltip: {
								formatter: function (param) {
									return param.name + '<br>' + (param.data.coord || '');
								}
							}
						},
						markLine: {
							symbol: ['none', 'none'],
							data: [
								[
									{
										name: 'from lowest to highest',
										type: 'min',
										valueDim: 'lowest',
										symbol: 'circle',
										symbolSize: 10,
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									},
									{
										type: 'max',
										valueDim: 'highest',
										symbol: 'circle',
										symbolSize: 10,
										label: {
											show: false
										},
										emphasis: {
											label: {
												show: false
											}
										}
									}
								],
								{
									name: 'min line on close',
									type: 'min',
									valueDim: 'close'
								},
								{
									name: 'max line on close',
									type: 'max',
									valueDim: 'close'
								}
							]
						}
					},
					{
						name: 'MA5',
						type: 'line',
						data: calculateMA(5),
						smooth: true,
						lineStyle: {
							opacity: 0.5
						}
					},
					{
						name: 'MA10',
						type: 'line',
						data: calculateMA(10),
						smooth: true,
						lineStyle: {
							opacity: 0.5
						}
					},
					{
						name: 'MA20',
						type: 'line',
						data: calculateMA(20),
						smooth: true,
						lineStyle: {
							opacity: 0.5
						}
					},
					{
						name: 'MA30',
						type: 'line',
						data: calculateMA(30),
						smooth: true,
						lineStyle: {
							opacity: 0.5
						}
					},

				]
			};

			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}
		
		function main(){
			var dataArray = queryStockHistory();
			generateEchartImage(dataArray);
		}

		main();
		
	</script>
</body>

</html>